import { Component } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import Tabs from '@/components/tabs/Index'
import { Button, TabPane } from 'ant-design-vue'
import OpenPaywage from './components/OpenPaywage'
import OpenPeriod from './components/OpenPeriod'
import OpenPeriodNew from './components/OpenPeriodNew'
import OpenDaily from './components/OpenDaily'
import OpenGroup from './components/OpenGroup'
import { getCompanyInfo, getGroupInfo, getPayWageInfo } from '@/api/company'
import type { CompanyInfoDto, GroupInfoDto, PayWageInfoDto } from '@/api/company/types'

@Component
export class OpenProducts extends Render {
    activeName = 'paywage'

    companyId = 0

    basicData = {} as PayWageInfoDto

    comapnyData = {} as CompanyInfoDto

    groupData = {} as GroupInfoDto

    async getData() {
        const res = await getPayWageInfo({
            companyId: this.companyId
        })
        return res
    }

    async getGroupData() {
        const res = await getGroupInfo({
            companyId: this.companyId
        })
        return res
    }

    async getCompanyData() {
        const res = await getCompanyInfo(
            this.companyId
        )
        return res
    }

    async initData() {
        const [basicData, comapnyData, groupData] = await Promise.all([
            this.getData(),
            this.getCompanyData(),
            this.getGroupData()
        ])
        this.basicData = basicData
        this.comapnyData = comapnyData
        this.groupData = groupData

        console.log(123455, this.groupData)
    }

    async onMounted() {
        if (this.$route.query?.companyId) {
            this.companyId = Number(this.$route.query.companyId)
            await this.initData()
        }
    }

    render() {
        return (
            <div class="p-20px h-full flex flex-col">
                <div class="flex-1">
                    <Tabs class="custom-tabs" v-model={this.activeName} >
                        <TabPane tab="发薪专户" key="paywage">
                            <OpenPaywage basicData={this.basicData} companyBasicInfo={this.comapnyData} onRefresh={this.initData}/>
                        </TabPane>
                        <TabPane tab="长期保（旧）" key="insurancePeriod">
                            <OpenPeriod companyBasicInfo={this.comapnyData}/>
                        </TabPane>
                        <TabPane tab="长期保（新）" key="insurancePeriodNew">
                            <OpenPeriodNew companyBasicInfo={this.comapnyData}/>
                        </TabPane>
                        <TabPane tab="日日保" key="insuranceDaliy">
                            <OpenDaily companyBasicInfo={this.comapnyData}/>
                        </TabPane>
                        <TabPane tab="团意日保" key="insuranceGroup">
                            <OpenGroup basicData={this.groupData} companyBasicInfo={this.comapnyData} />
                        </TabPane>
                    </Tabs>
                </div>
            </div>
        )
    }
}

export default toNative<{}, {}>(OpenProducts)
